import React, { useState } from "react";
import { ResultPage, Input, Button } from "antd-mobile";
import { LoopOutline } from "antd-mobile-icons";
import {useNavigate} from 'react-router-dom'
import './index.css'
function Index() {
  const navigate=useNavigate()
  const [start, setstart] = useState("");
  const [end, setend] = useState("");
  const handToList=()=>{
    navigate(`/list/?start=${start}&end=${end}`)
  }
  return (
    <div>
      <ResultPage
        status=""
        title='火车票预定'
        description="便携购票，服务您的每一次出行"
      >
        <ResultPage.Card style={{ height: 64, padding: 8 }}>
          <div className="box">
            <Input
              placeholder="出发城市"
              value={start}
              style={{width:120}}
              onChange={(val) => {
                setstart(val);
              }}
            />
            <span>
              <LoopOutline fontSize={20} />
            </span>
            <Input
              placeholder="到达城市"
              value={end}
                   style={{width:120}}
              onChange={(val) => {
                setend(val);
              }}
            />

           
          </div>
           <Button block color="primary" size="large" onClick={()=>handToList()}>
              查询
            </Button>
        </ResultPage.Card>
      </ResultPage>
    </div>
  );
}

export default Index;
